<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>

</body>
<script>
    // async函数 (异步函数) 
    // ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
    // async 函数是什么？一句话，它就是 Generator 函数的语法糖。


    // 了解异步函数?
    // 1. 通过Promise和Generator函数对原函数进行了封装 => 根据函数执行的结果返回一个Promise实例,函数正常执行完毕 => 以成功 , 函数执行过程中出错 => 已失败
    // async function fn() {
    //     // aaa;
    //     return 1;   // 返回Promise实例  {fulfilled:1}
    // }
    // var result = fn();  // 返回Promise实例
    // console.log(result);

    // 此处为了方便理解 => 部分封装
    // function myAsync(fn) {
    //     return new Promise(function (resolve, reject) {
    //         try {
    //             var result = fn();
    //             resolve(result);
    //         } catch (err) {
    //             reject(err);
    //         }
    //     })
    // }


    // 如何使用async函数  => 使得异步操作变得更加方便。(同步代码 根据函数执行的结果 =>生成Promise对象)
    // async函数 配合 await关键词 可以等待Promise实例状态改变之后 再向后执行

    // 依次请求  按顺序执行
    // async function fn() {
    //     var txt1 = await readTxt("../data/1.txt", 1000);  // Promise实例 (Promise封装的异步操作)
    //     console.log(txt1);
    //     var txt2 = await readTxt("../data/2.txt", 500);  // Promise实例 (Promise封装的异步操作)
    //     console.log(txt2);
    //     var txt3 = await readTxt("../data/3.txt", 2000);  // Promise实例 (Promise封装的异步操作)
    //     console.log(txt3);

    //     var str = txt1 + txt2 + txt3;
    //     console.log(str);

    // }

    // fn();


    // 同时请求 依次返回结果
    async function fn() {
        var p1 = readTxt("../data/1.txt", 1000);
        var p2 = readTxt("../data/2.txt", 500);
        var p3 = readTxt("../data/3.txt", 2000);

        var txt1 = await p1;  // Promise实例 (Promise封装的异步操作)
        console.log(txt1);
        var txt2 = await p2;  // Promise实例 (Promise封装的异步操作)
        console.log(txt2);
        var txt3 = await p3;  // Promise实例 (Promise封装的异步操作)
        console.log(txt3);

        var str = txt1 + txt2 + txt3;
        console.log("函数内", str);

        return str;

    }

    var p = fn();
    p.then(data => {
        console.log("函数外", data);
    })











    function readTxt(url, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                if (isFulfilled == false) {
                    reject("已失败");
                }
                $.ajax({
                    type: "get",
                    url: url,
                    success: function (txt) {
                        resolve(txt);
                    },
                    error: function (err) {
                        reject(err);
                    }
                })
            }, delay);
        })
        return p; // {pending:undefind} Promise实例 (请求有结果后改变状态)
    }




</script>

</html>